<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/js/index.js}"></script>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <link rel="stylesheet" th:href="@{/css/fonts/element-icons.woff}">
</head>

<body>
<div id="app">
    <template>
        <div>
            <el-button style="margin-left: 55%" size="mini" type="danger" @click="addSaveDialogFormVisible = true">
                添加
            </el-button>
        </div>
        <el-dialog title="添加" :visible.sync="addSaveDialogFormVisible" width="25%">
            <el-form :model="postSave">
                <el-form-item label="职位名称" :label-width="formLabelWidth">
                    <el-input v-model="postSave.postName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用人部门" :label-width="formLabelWidth">
                    <el-select v-model="postSave.postDepartment" placeholder="请选择">
                        <el-option v-for="pd in allPostDepartment" :key="pd.departmentId" :label="pd.departmentName"
                                   :value="pd.departmentId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="招聘人数" :label-width="formLabelWidth">
                    <el-input v-model="postSave.postNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="薪资范围" :label-width="formLabelWidth">
                    <el-input v-model="postSave.postPay" label="薪资范围"></el-input>
                </el-form-item>
                <el-form-item label="学历要求" :label-width="formLabelWidth">
                    <el-select v-model="postSave.postDegree" placeholder="请选择">
                        <el-option v-for="pd in allPostDegree" :key="pd.degreeId" :label="pd.degreeName"
                                   :value="pd.degreeId"></el-option>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作省份" :label-width="formLabelWidth">
                    <el-select v-model="postSave.postProvincial" placeholder="请选择" @change="changeProvincial">
                        <el-option v-for="pd in allPostProvincial" :key="pd.provincialId" :label="pd.provincialName"
                                   :value="pd.provincialId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作城市" :label-width="formLabelWidth">
                    <el-select v-model="postSave.postCity" placeholder="请选择">
                        <el-option v-for="pd in allPostCity" :key="pd.cityId" :label="pd.cityName" :value="pd.cityId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addSaveDialogFormVisible =  false">取 消</el-button>
                <el-button type="primary" @click="savePost">确 定</el-button>
            </div>
        </el-dialog>
        <el-table :data="recruitmentInformation" style="width: 100%">
            <el-table-column label="编号" width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.postId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="职位名称" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.postName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用人部门" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.departmentName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="招聘人数" width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.postNumber }}</span>
                </template>
            </el-table-column>

            <el-table-column label="薪资范围" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.postPay }}</span>
                </template>
            </el-table-column>

            <el-table-column label="学历要求" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.degreeName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="工作城市" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.cityName }}</span>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script>
    const myAxios = axios.create({
        baseURL: 'http://localhost:8080',
        timeout: 5000,
    });
    let vm = new Vue({
        el: '#app',
        data: {
            formLabelWidth: '50',
            addSaveDialogFormVisible: false,
            allPostDepartment: [],
            allPostDegree: [],
            allPostProvincial: [],
            allPostCity: [],
            recruitmentInformation: [],
            postSave: {
                postName: "董事长",
                postDepartment: 2,
                postNumber: 5,
                postPay: "面议",
                postDegree: 1,
                postProvincial: 1,
                postCity: 1
            }
        },
        methods: {
            changeProvincial(){
                myAxios("/city/list?provincialId="+this.postSave.postProvincial).then(e => {
                    this.allPostCity = e.data.data;
                });
            },
            initialize(){
                this.list();
                myAxios("/city/provincial").then(e => {
                    this.allPostProvincial = e.data.data;
                });
                myAxios("/degree/list").then(e => {
                    this.allPostDegree = e.data.data;
                });
                myAxios("/department/list").then(e => {
                    this.allPostDepartment = e.data.data;
                });
            },
            savePost(){
                myAxios.post("/post/save",this.postSave).then(e => {
                    this.allPostDepartment = e.data.data;
                    this.addSaveDialogFormVisible = false;
                    this.list();
                });
            },
            list() {
                myAxios("/post/list?page=1&limit=20000").then(e => {
                    console.log(e)
                    this.recruitmentInformation = e.data.data;
                })
            },
        },
        mounted() {

        },
        created() {
            this.initialize();
        }
    })
</script>

</html>